<template>
  <view class="main-box">
    <!-- 项目基本信息卡片 -->
    <view class="project-card">
      <view class="project-header">
        <view class="project-name">{{ project.project_name }}</view>
        <view class="project-enterprise">
          <text class="iconfont icon-qiye"></text>
          <text>{{ project.enterprise_name }}</text>
        </view>
      </view>

      <view class="project-info">
        <view class="info-item">
          <text class="info-label">项目日期：</text>
          <text class="info-value">{{ formatDate(project.project_date) }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">年龄要求：</text>
          <text class="info-value">
            {{ $utils.getConstantItemByVal("ageLimit", project.age_limit).label }}
          </text>
        </view>
        <!-- 				<view class="info-item">
					<text class="info-label">项目模式：</text>
					<span
						style=""
						:class="'tag-type-' + $utils.getConstantItemByVal('projectMode', project.mode).elType"
					>
						{{ $utils.getConstantItemByVal('projectMode', project.mode).label }}
					</span>
				</view> -->
        <view class="info-item">
          <text class="info-label">在线合同：</text>
          <text class="info-value">{{ project.is_online_contract ? "是" : "否" }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">预支工资：</text>
          <text class="info-value">{{ project.is_advance_salary ? "是" : "否" }}</text>
        </view>
        <!-- 				<view class="info-item">
					<text class="info-label">分配时间：</text>
					<text class="info-value">{{ formatDateTime(project.assigned_time) }}</text>
				</view> -->
      </view>
    </view>

    <!-- 员工统计卡片 -->
    <view class="stat-card">
      <view class="stat-title">员工统计</view>
      <view class="stat-content">
        <view class="stat-item">
          <view class="stat-value">{{ stats.total || 0 }}</view>
          <view class="stat-label">项目总人数</view>
        </view>
        <view class="stat-item">
          <view class="stat-value primary-color">{{ stats.invited || 0 }}</view>
          <view class="stat-label">已邀请人数</view>
        </view>
        <view class="stat-item">
          <view class="stat-value warning-color">{{ stats.pending || 0 }}</view>
          <view class="stat-label">待审批人数</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      projectId: 0, // 项目ID
      project: {}, // 项目信息
      stats: {}, // 员工统计
      showQrCode: false, // 是否显示二维码弹窗
      qrCodeUrl: "", // 二维码URL
    };
  },
  onLoad(options) {
    // 检查登录状态
    if (!this.checkLogin()) {
      return;
    }

    // 获取项目ID和企业ID
    if (options.project_id) {
      this.projectId = parseInt(options.project_id);
      // 加载项目详情
      this.loadProjectDetail();
    } else {
      // 检查备用字段
      if (options.id) {
        this.projectId = parseInt(options.id);

        // 加载项目详情
        this.loadProjectDetail();
      } else {
        uni.showToast({
          title: "项目ID不能为空",
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateBack();
        }, 1500);
      }
    }
  },
  methods: {
    // 检查登录状态
    checkLogin() {
      const token = uni.getStorageSync("token");
      if (!token) {
        uni.redirectTo({
          url: "/pages/login",
        });
        return false;
      }
      return true;
    },

    // 返回上一页
    goBack() {
      uni.navigateBack();
    },

    // 加载项目详情
    loadProjectDetail() {
      this.$request.projectDetail(
        {
          project_id: this.projectId,
        },
        (res) => {
          this.project = res.project || {};
          this.stats = res.employee_stats || {
            total: 0,
            invited: 0,
            pending: 0,
          };
        }
      );
    },

    // 格式化日期
    formatDate(dateStr) {
      if (!dateStr) return "未设置";
      try {
        const date = new Date(dateStr);
        return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(
          2,
          "0"
        )}-${String(date.getDate()).padStart(2, "0")}`;
      } catch (e) {
        return dateStr;
      }
    },

    // 格式化日期时间
    formatDateTime(dateStr) {
      if (!dateStr) return "未设置";
      try {
        const date = new Date(dateStr);
        return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(
          2,
          "0"
        )}-${String(date.getDate()).padStart(2, "0")} ${String(date.getHours()).padStart(
          2,
          "0"
        )}:${String(date.getMinutes()).padStart(2, "0")}`;
      } catch (e) {
        return dateStr;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/static/scss/variables.scss";

/* 项目基本信息卡片 */
.project-card {
  padding: 3vw;
  background-color: #fff;
  border-radius: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

  .project-header {
    border-bottom: 1rpx solid #f0f0f0;
    padding-bottom: 20rpx;
    margin-bottom: 20rpx;

    .project-name {
      font-size: 36rpx;
      font-weight: bold;
      color: #333;
      margin: 15rpx 0;
    }

    .project-enterprise {
      display: flex;
      align-items: center;

      image {
        width: 40rpx;
        height: 40rpx;
        border-radius: 20rpx;
        margin-right: 10rpx;
      }

      text {
        font-size: 28rpx;
        color: #666;
      }
    }
  }

  .project-info {
    .info-item {
      margin-bottom: 15rpx;
      display: flex;

      .info-label {
        width: 180rpx;
        font-size: 28rpx;
        color: #666;
      }

      .info-value {
        flex: 1;
        font-size: 28rpx;
        color: #333;

        &.primary-color {
          color: #3089ff;
        }
      }
    }
  }
}

/* 员工统计卡片 */
.stat-card {
  margin: 3vw 0 0 0;
  padding: 3vw;
  background-color: #fff;
  border-radius: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

  .stat-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 30rpx;
  }

  .stat-content {
    display: flex;
    justify-content: space-around;

    .stat-item {
      text-align: center;

      .stat-value {
        font-size: 48rpx;
        font-weight: bold;
        color: #333;
        margin-bottom: 10rpx;

        &.primary-color {
          color: #3089ff;
        }

        &.warning-color {
          color: #ff9500;
        }
      }

      .stat-label {
        font-size: 24rpx;
        color: #999;
      }
    }
  }
}

/* 通用颜色定义 */
.primary-color {
  color: #3089ff;
}

.warning-color {
  color: #ff9500;
}

.success-color {
  color: #19be6b;
}

.danger-color {
  color: #ff3b30;
}

.icon-qiye {
  color: $colorPrimary !important;
  font-size: 38rpx !important;
  margin-right: 2vw;
}
</style>
